Notifier = {
		Initialize : function () {
			$("<div id='notifier_holder'>").appendTo("body");
			$("<div id='notifier'>").text("Online").appendTo("#notifier_holder");
			$("<div id='online_counter'>").text("(loading...)").appendTo("#notifier");
			$("<div id='ct_list'>").html("<div id='fr_online'/>offline : <br/><div id='fr_offline'/>").dialog({title : "Contact List", width : 225, height : 355});
			// link dbclick to changeActiveUser
			// don't remove this line))) i really love this selector 
			//$("#ct_list div:not(#fr_online, div.mes)").live("dblclick", function(){
			$("#ct_list div.ct").live("dblclick", function(){
					alert(this);
					Messenger.changeActiveUser(this.id.substr(1));
			});
	
		},
		
		_insertBefore : function (s, cto, el) {
			var pos = -1 ;
			for (_i in cto) {
				if (s<cto[_i]) pos = _i; 
			}
			if (pos>0) {
				el.insertBefore("#f"+pos);
			} else {
				el.appendTo("#fr_online");
			}
		},
		
		UpdateListOnline : function (e) {
			// OPTION 3	
			debugger;
			var ct =  [];
			var ctc_off = [];
			$.each (e , function () {
				ct[this[0]] = this[1];
			});	
			//		
			$(".ct", "#ct_list").each (function () {
				if  ($(".mes", this).length>0) {
						if (ct[this.id.substr(1)]) {	
								ct[this.id.substr(1)] = this.innerHTML;
						
						} else {
								ctc_off[this.id.substr(1)] = this.innerHTML;
						}
				}
			});
			//
			$(".ct", "#fr_online").remove();
			var ct_s = [];
			ct_s =ct_s.concat(ct);
			ct_s.sort();
			for (_i in ct_s) {
				$("<div>").addClass("ct").attr({id : "f"+ct.indexOf(ct_s[_i])}).html(ct_s[_i]).appendTo("#fr_online");
			}
			$(".ct", "#fr_offline").remove();
			ct_s = [];
			ct_s =ct_s.concat(ctc_off);
			ct_s.sort();
			for (_i in ct_s) {
				$("<div>").addClass("ct").attr({id : "f"+ctc_off.indexOf(ct_s[_i])}).html(ct_s[_i]).appendTo("#fr_offline");
			}

			/* oPTION -1		
			var ct =  [];
			var cto = [];
			
			$.each (e , function () {
				ct[this[0]] = this[1];
			});
			
			$(".ct", "#fr_online").each (function () {
				if (ct[this.id.substr(1)]) {
					cto[this.id.substr(1)] = ct[this.id.substr(1)];
					delete ct[this.id.substr(1)];
					
				} else {
					if  ($(".mes", this).length>0) {
						$(this).prependTo("#offline");
					} else {
						$(this).remove();
					}
				}
			});
			
			$(".ct", "#fr_offline").each (function () {
				if (ct[this.id.substr(1)]) {
					//delete ct[this.id.substr(1)];
					//$(this).appendTo("#fr_online");
					//
					ct[this.id.substr(1)] = $(this).html();
				} else {
					if ($(".mes", this).length==0) {
						$(this).remove();
					}
				}
			});
			var ct2 = [];
			ct2 = ct2.concat(ct);
			// TODO : implement custom sort
			ct.sort();
			// TODO : when cto is empty no need in reverse sorting should be a clause here
			ct.reverse();
			for (_i in ct) {
				Notifier._insertBefore(ct[_i], cto, $("<div>").addClass("ct").attr({id : "f"+ct2.indexOf(ct[_i])}).html(ct[_i]));
			}
			
			*/
		
			
			/* OPTION-2
			for ( var i in e ) {
			    var _id =e[i][0];
			    var t = $("#f"+_id);
			    if (t.length>0) {
			    	if (t.hasClass("offline")) {
			    		t.appendTo("#fr_online");
			    		t.removeClass("offline");
			    	}
			    	t.addClass("checked");
			    }
			    else {
			    	$("<div>").attr({id : "f"+_id}).text(e[i][1]).addClass("checked").appendTo("#fr_online");
			    }   	
			} // end-for
			// get all unchecked elements which are supposed to be in offline or removed at all
		    $(":not(div.checked, div.mes)","#fr_online").each( function() {
		    	if ($("div.mes",this).length>0) {
		    		$(this).addClass("offline").appendTo("#fr_offline")
		    	} else {
		    		$(this).remove();
		    	}
		    });
		    // uncheck everyone in online
		    $("div.checked", "#fr_online").removeClass("checked");	
		    */
		},//end-update function
		
		UpdateListMessages : function (e) {
			debugger;
			var mes = [];
			$.each(e.d , function() {
				if (this[5]==0) {
					mes[this[3][0]] = this[3][1];
				} 
			});
			//---
			$("div.mes","#fr_online").each(function (){
				if (mes[this.id.substr(1)]) {
					delete mes[this.id.substr(1)];
				} else {
					$(this).remove();
				}
			});
			$("div.mes","#fr_offline").each(function (){
				if (mes[this.id.substr(1)]) {
					delete mes[this.id.substr(1)];
				} else {
					$(this).parent().remove();
				}
			});
			//---
			for (_id in mes) {
				var t = $("#f"+_id);
				if (t.length==0) {
					t = $("<div>").attr({id : "f"+_id}).addClass("ct").text(mes[_id]).appendTo("#fr_offline");	
				} 
				$("<div>").attr({id : "m"+_id}).addClass("mes").text(" (!) ").appendTo(t);
			}
		
		}
		
}; 
Notifier.Initialize();
done = true;